<template>
	<view class="zaiui-login-content">
		
		<u-navbar title="账号注册" :autoBack="true"></u-navbar>
		
		<view class="logo-view">
			<image class="logo" :src="configInfo.logo" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="title-h">您好,</view>
			<view class="introduce">{{configInfo.name}}欢迎您~</view>
			
			<input class="phone-input" placeholder="请设置登录密码"/>
			<input class="phone-input" placeholder="请确认登录密码"/>
			
			<!-- <view class="right-tip-view">
				<text>有账号？</text>
				<text class="tap" @tap="tapLogin">立即登录</text>
			</view> -->
		</view>
		<view class="foot-view">
			<view class="zaiui-btn-view">
				<button class="zaiui-btn" @tap="tapCode">获取验证码</button>
			</view>
			<view class="font-tag-view">
				<text class="font-tag" @tap="tapLogin">手机号登录</text>
				<text class="font-tag" @tap="tapLogin">忘记密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {configInfo} from '@/common/utils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				configInfo,
				titleHeight: "",
			}
		},
		onLoad() {
 
		},
		methods: {
			tapCode() {
				uni.navigateTo({
					url: '/pages_Me/login/code'
				});
			},
			tapLogin() {
				uni.navigateTo({
					url: '/pages_Me/login/index'
				});
			}
		}
	}
</script>


<style lang="less">
page{
	min-height: 100vh;
	min-width: 100%;
}
.zaiui-login-content {
	position: relative;
	color: #2B2C2D;
	.text-center {
		text-align: center;
	}
	.logo-view { 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 30vh;
		.logo {
			width: 80px;
			height: 80px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
			
		}
	}
	.content {
		position: relative;
		padding: 0 36.36rpx;
		.title-h {
			font-size: 45.45rpx;
		}
		.introduce {
			color: #909192;
			font-size: 25.45rpx;
			margin: 9.09rpx 0 36.36rpx;
			.tap {
				color: #75A9C2;
			}
		}
		.zaiui-flex-view {
			display: flex;
			.flex-sub {
				flex: 1;
				color: #2B2C2D;
				padding: 18.18rpx 0;
				border-bottom: 1.81rpx solid #EBECED;
				height: 52.72rpx;
			}
			.flex-sub + .flex-sub{
				margin-left: 36.36rpx;
			}
		}
		.phone-input {
			height: 40px;
		    color: #2B2C2D;
		    // padding: 18.18rpx 0;
		    border-bottom: 1.81rpx solid #EBECED;
			.input-placeholder {
				color: #909192;
				font-size: 29.09rpx;
			}
		}
		.phone-input + .phone-input {
			margin-top: 36.36rpx;
		}
		.checking-view {
			.phone-input {
				font-size: 32.72rpx;
			}
		}
		.right-tip-view {
			color: #c1c1c1;
			font-size: 25.45rpx;
			text-align: right;
			margin-top: 18.18rpx;
			.tap {
				color: #75A9C2;
			}
		}
	}
	.zaiui-btn {
		position: relative;
		border: 0;
		width: 100%;
		color: #ffffff;
		line-height: 1;
		height: 81.81rpx;
		padding: 0 29.09rpx;
		font-size: 27.27rpx;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0, 0);
		margin-right: initial;
		border-radius: 654.54rpx;
		background-color: #FF776D;
		&:after {
			display: none;
		}
	}
	.zaiui-btn.button-hover {
		transform: translate(1rpx, 1rpx);
	}
	.foot-view {
		width: 100%;
		position: fixed;
		bottom: 63.63rpx;
		.zaiui-btn-view {
			padding: 0 36.36rpx;
		}
		.font-tag-view {
			position: relative;
			text-align: center;
			margin-top: 20px;
			width: 100%;
			.font-tag {
				position: relative;
				color: #c1c1c1;
				font-size: 25.45rpx;
			}
			.font-tag + .font-tag {
				margin-left: 63.63rpx;
				&:after {
					content: " ";
					display: block;
					width: 2rpx;
					height: 100%;
					top: 0;
					left: -31.81rpx;
					position: absolute;
					background: #c1c1c1;
					transform: scale(0.5);
					box-sizing: border-box;
					pointer-events: none;
				}
			}
		}
	}
}

.num-lock-view {
	position: fixed;
	width: 100%;
	bottom: 0;
	background-color: #ffffff;
	color: #666666;
	margin-bottom: -2rpx;
	opacity: 0;
	z-index: 99999;
	transition: all 0.3s ease-in-out 0s;
	.num-lock-head {
		background-color: #ffffff;
		color: #666666;
		position: relative;
		font-size: 27.27rpx;
		height: 81.81rpx;
		line-height: 81.81rpx;
		box-shadow: 0 -3.63rpx 9.09rpx rgba(0, 0, 0, 0.05);
		.title {
		    color: #333333;
		    text-align: center;	
		}
		.close {
		    position: absolute;
		    right: 36.36rpx;
		    top: 0;	
		}
		.code-bak-view {
			position: relative;
			text-align: center;
			color: #333333;
			.code-text {
				background: #f1f1f1;
			    padding: 9.09rpx 18.18rpx;
			    border-radius: 90.9rpx;
			}
			.close-icon {
				position: relative;
				font-size: 32.72rpx;
			    margin-left: 25.45rpx;	
			}
		}
	}
	.key-grid-list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		.key-item {
			position: relative;
			display: flex;
			padding: 20rpx 0 29.09rpx;
			width: 33.33%;
			transition-duration: 0s;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			flex-direction: column;
			&:after {
			    position: absolute;
			    top: 0;
			    left: 0;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    width: 200%;
			    height: 200%;
			    border-right: 2rpx solid rgba(0, 0, 0, .1);
			    border-bottom: 2rpx solid rgba(0, 0, 0, .1);
			    -webkit-border-radius: inherit;
			    border-radius: inherit;
			    content: " ";
			    -webkit-transform: scale(.5);
			    transform: scale(.5);
			    -webkit-transform-origin: 0 0;
			    transform-origin: 0 0;
			    pointer-events: none;
			}
			&:nth-child(3n):after {
				border-right-width: 0;
			}
			.num {
				font-size: 40rpx;
			    color: inherit;	
			}
			.close {
				font-size: 32.72rpx;
				margin-top: 9.09rpx;
			}
		}
	}
}
.num-lock-view.show {
	opacity: 1;
	
}

</style>

